<template>
  <div class="app-container">
    <el-card>
      <div slot="header" style="display:flex;align-items: center;justify-content: space-between;">
        <span>优惠券管理</span>
        <el-button type="success" icon="el-icon-plus" size="small" @click="viewDetail(true, {})">添加优惠券</el-button>
      </div>
      <div>
        <el-form :inline="true" :model="formData" label-width="100px">
          <el-form-item label="优惠券名称: ">
            <el-input clearable v-model="formData.couponName"  placeholder="模糊搜索优惠券名称"></el-input>
          </el-form-item>
          <el-form-item label="创建时间: ">
            <el-date-picker type="daterange" v-model="formData.dateRange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
          </el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="doSearch">查询</el-button>
        </el-form>
      </div>
      <el-table :data="tableData">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="名称" prop="couponName"></el-table-column>
        <el-table-column label="规则名称" prop="" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <div>
              {{ row.couponCategoryName }} / {{ row.couponMoneyName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="预计发放" prop="planNum" width="100">
          <template slot-scope="{ row }">
            <div>{{ row.planNum || 0 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="已领取" prop="receiveNum" width="100">
          <template slot-scope="{ row }">
            <div>{{ row.receiveNum || 0 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="已消耗" prop="consumeNum" width="100">
          <template slot-scope="{ row }">
            <div>{{ row.consumeNum || 0 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="180"></el-table-column>
        <el-table-column label="状态" width="80">
          <template slot-scope="{ row }">
            <div>
              {{ row.isActive ? '启用' : '未启用' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <div class='item-btns'>
              <!-- <el-button size="small" type="primary" v-if="!row.isActive" @click="viewDetail(true, row)">编辑</el-button> -->
              <el-button size="small" @click="manageCoupon(row.isActive ? 2 : 1, row)">{{ row.isActive ? '停用' : '启用' }}</el-button>
              <!-- <el-button size="small" type="danger" @click="manageCoupon(3, row)" v-if="!row.isActive">删除</el-button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination :current-page.sync="pagination.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
    </el-card>
    <!--destroy-on-close-->
    <el-dialog :visible.sync="showDialog" title="优惠券" @close="viewDetail(false, {})">
      <view-pane @close="refresh => viewDetail(false, {}, refresh)" :visible="showDialog" :data="dialogData"></view-pane>
    </el-dialog>
  </div>
</template>

<script>
import ListMixin from './list';
import ViewPane from './components/view';

export default {
  mixins: [ListMixin],
  components: { ViewPane },
};
</script>

<style lang="scss" scoped>
@import './list.scss';
</style>
